dynamic-form<template>
    <el-upload v-bind="getProps()" :file-list="fList">
        <slot>
            <el-button size="small" type="primary">点击上传</el-button>
        </slot>
    </el-upload>
</template>

<script>
    import baseURL from '@/utils/baseURL'

    export default {
        props: {
            uploadUrl: {
                type: String,
                default: baseURL.jky + '/fileServer/uploadFile'
            },
            value: {
                type: Array,
            },
            limit: {
                type: Number,
                default: 1,
            },
        },
        data() {
            return {
                fList: !this.value ? [] : this.value.map(url => ({url})), // 无用。。
            }
        },
        methods: {
            getProps() {
                const base = {
                    limit: this.limit,
                    action: this.uploadUrl,
                    showFileList: false,
                    // drag:true,
                    onExceed: this.handleExceed,
                    onSuccess: this.handleSuccess,
                    onRemove: this.handleRemove,
                }
                if (this.limit !== 1) {
                    base['multiple'] = true
                }
                return Object.assign(base, this.$attrs)
            },
            handleExceed(files, fileList) {
                this.$message.warning(`文件上传数量超过限制，删除后再试！`)
            },
            updateFileList(allRes) {
                const allSrc = allRes.map(item => item.response.data[0]) // {errno: 0, code: 200, data: ["http://images.oraro.net/20190625/1561445617101"], message: "ok"}
                this.$emit('input', allSrc)
                this.$emit('change', allSrc) // 新增change事件
            },
            handleSuccess(res, file, allRes) {
                this.updateFileList(allRes)
            },
            handleRemove(res, allRes) {
                this.updateFileList(allRes)
            },
        },
    }
</script>

<style lang="scss" scoped>

</style>
